<template>
  <div class="NavModule">
    <div class="tab mb-16" v-if="tabList.length>0">
      <!--配置选项卡-->
      <el-popover
        class="config"
        placement="bottom"
        v-model="visible"
        @click="visible = !visible">
        <el-checkbox-group
          v-model="checkedTabs"
          :max="7">
          <el-checkbox
            v-for="item in tabs"
            :label="item.name"
            :key="item.id">
            {{item.name}}
          </el-checkbox>
          <el-button type="success" @click="submit">确定</el-button>
        </el-checkbox-group>
        <el-button slot="reference">配置选项卡</el-button>
      </el-popover>
      <!--tabs-->
      <el-tabs v-model="activeName">
        <el-tab-pane v-for="item in tabList" :key="item.id" :label="item.name" :name="item.id">
          <el-table
            :header-cell-style="getRowClass"
            :data="item.content.body"
            style="width: 100%;">
            <el-table-column
              v-for="head in item.content.head" :key="head.prop"
              :prop="head.prop"
              :label="head.label">
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="modules mb-16" v-for="(item,index) in moduleList" :key="index">
      <h2>{{item.group}}</h2>
      <module-entry class="module" v-for="module in item.modules" :key="module.name" :module="module"></module-entry>
    </div>
  </div>
</template>

<script>
import ModuleEntry from '@/components/ModuleEntry';
export default {
  name: 'NavModule',
  components: { ModuleEntry },
  data () {
    return {
      visible: false, // 配置选项卡
      navId: '', // 大模块Id
      moduleList: [], // 模块列表
      tabs: [], // 全部可选择的tab
      checkedTabs: [], // 选中的checkbox
      activeName: '', // 当前的tab
      tabList: [] // 渲染的tabList
    }
  },
  watch: {
    $route (to) {
      this.navId = to.params.id;
      this.dataInit()
    }
  },
  methods: {
    /**
     * 初始化数据，获取模块，获取tabs
     */
    dataInit () {
      let paramModule = {
        orgId: 1,
        navId: this.navId
      };
      this.$api.getModules(paramModule).then(res => {
        this.moduleList = res
      });
      this.$api.getTabs(paramModule).then(res => {
        this.tabs = res;
        this.activeName = this.tabs[0].id;
        this.tabs.forEach(item => {
          if (item.checked) {
            this.checkedTabs.push(item.name);
            this.submit();
          }
        })
      })
    },
    /**
     * 配置选项卡的方法
     */
    submit () {
      this.visible = !this.visible;
      this.tabList = this.tabs.filter(item => this.checkedTabs.includes(item.name));
    },
    // 设置表格第一行的样式
    getRowClass ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:#F0F1F5;color:#000'
      } else {
        return ''
      }
    }
  },
  created () {
    this.navId = this.$route.params.id;
  },
  mounted () {
    this.dataInit()
  }
}
</script>

<style scoped lang="scss">
  .tab {
    height: 340px;
    background: rgba(255, 255, 255, 1);
    border-radius: 10px;
    padding: 10px 30px;
  }

  .config {
    position: absolute;
    right: 50px;
    z-index: 99;
  }

  .modules {
    background: rgba(255, 255, 255, 1);
    border-radius: 10px;
    padding: 30px;

    h2 {
      margin-bottom: 30px;
    }

    .module {
      margin: 0 40px 0 0;

      & + & {
        margin-left: 40px;
      }
    }
  }
</style>
